<template>
  <div v-if="data && ranList">
    <div class="company_header">
      <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ data.data[0].cname }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header_content">
        <img :src="'/companys/' + data.data[0].clogo" alt="" />
        <div class="header_middle">
          <img src="@/assets/img/5408.png" alt="" />
          <h1>{{ data.data[0].cname }}</h1>
        </div>
        <div class="header_right">
          <div>
            <div>
              <h2 class="rates">5.0</h2>
              <span>评分</span>
            </div>
            <div>
              <h2>{{ data.data[0].rates }}</h2>
              <span>评价</span>
            </div>
            <div>
              <h2>{{ data.data[0].fans }}</h2>
              <span>关注</span>
            </div>
          </div>
          <div>
            <span>在线咨询</span
            ><span @click="dialogVisible = true">婚礼报价</span>
          </div>
        </div>
      </div>
      <div></div>
    </div>

    <div class="company_content">
      <div class="content_left">
        <img :src="'/companys/' + data.data[0].cpic" alt="" />
        <div class="img_bottom">
          <img src="@/assets/img/12083705.png" alt="" />
          <div>
            <img src="@/assets/img/083742.png" alt="" /><span>免出城费</span>
          </div>
          <div>
            <img src="@/assets/img/083742.png" alt="" /><span
              >免费婚礼管家</span
            >
          </div>
          <div>
            <img src="@/assets/img/083742.png" alt="" /><span
              >不满意重新设计</span
            >
          </div>
        </div>
      </div>
      <div class="content_right">
        <div class="phone">
          <h2>电话</h2>
          <div>
            <img src="@/assets/img/phone90446.png" alt="" /><span>{{
              data.data[0].phone
            }}</span>
          </div>
        </div>
        <div class="address">
          <h2>地址</h2>
          <span>{{ data.data[0].caddress }}</span>
          <div class="map_section">
            <el-button type="text" @click="mapVisible = true">地图</el-button>

            <el-dialog :title="data.data[0].cname" :visible.sync="mapVisible">
              <p>{{ data.data[0].caddress }}</p>
              <map-container :position="data.data[0].caddress"></map-container>
            </el-dialog>
          </div>
        </div>
        <div class="gift">
          <h2>到店礼</h2>
          <span>{{ data.data[0].gifts }}</span>
        </div>
        <div class="announcement">
          <h2>公告</h2>
          <span>{{ data.data[0].announcement }}</span>
        </div>
      </div>
    </div>
    <div class="products">
      <div class="product_left">
        <div class="title"><h3>商家精选</h3></div>
        <product-cell
          v-for="item in proList"
          :key="item.pid"
          :item="item"
        ></product-cell>
      </div>
      <div class="product_right">
        <h2>同类热卖</h2>
        <hot-sell-cell
          v-for="item in ranList"
          :key="item.pid"
          :item="item"
        ></hot-sell-cell>
      </div>
    </div>

    <el-dialog
      center
      width="40%"
      :visible.sync="dialogVisible"
      @close="closeDialog"
    >
      <h1>询问底价</h1>
      <el-input
        @blur="checkPhone"
        v-model="phone"
        class="input"
        placeholder="输入手机号"
      ></el-input>
      <span :style="{ visibility: isVisibility }">请输入正确格式手机号</span>
      <div>
        <el-input
          v-model="code"
          class="input"
          placeholder="输入4位手机验证码"
        ></el-input>
        <span @click="sendCode" :class="{ disabled: sendCodeDisabled }">{{
          sendCodeContent
        }}</span>
      </div>
      <el-button @click="open" :plain="true" class="preOrder"
        >立即预约</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import ProductCell from "@/components/ProductCell.vue"
import HotSellCell from "@/components/HotSellCell.vue"
import MapContainer from "@/components/MapContainer.vue"
export default {
  components: { ProductCell, HotSellCell, MapContainer },
  data() {
    return {
      data: null,
      visible: false,
      proList: null,
      ranList: null,
      mapVisible: false,
      dialogVisible: false,
      isVisibility: "hidden",
      phone: "",
      code: "",
      sendCodeDisabled: false,
      sendCodeContent: "获取验证码",
      timer: "",
    }
  },
  methods: {
    closeDialog() {
      this.phone = ""
      this.code = ""
      this.isVisibility = "hidden"
      clearInterval(this.timer)
      this.sendCodeContent = "获取验证码"
      this.sendCodeDisabled = false
    },
    open() {
      if (this.code === "1111") {
        this.$message({
          message: "马上会有客户专员联系您",
          type: "success",
        })
        this.dialogVisible = false
      } else {
        this.$message.error("请输入正确的验证码")
      }
    },
    checkPhone() {
      const reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (reg.test(this.phone)) {
        this.isVisibility = "hidden"
        return true
      } else {
        this.isVisibility = "visible"
        return false
      }
    },
    sendCode() {
      if (this.checkPhone()) {
        this.sendCodeDisabled = true
        let seconds = 59
        this.sendCodeContent = seconds-- + "秒"
        this.timer = setInterval(() => {
          this.sendCodeContent = seconds-- + "秒"
          if (seconds < 0) {
            clearInterval(this.timer)
            this.sendCodeContent = "获取验证码"
            this.sendCodeDisabled = false
          }
        }, 1000)
      }
    },
    getRanData() {
      const url = "/companys/productsRandom?n=3"
      this.axios.get(url).then((res) => {
        // console.log(res)
        console.log("ran的res", res)
        this.ranList = res.data.data
      })
    },
    getData() {
      const url = "/companys/company?cid=" + this.$route.query.cid
      this.axios.get(url).then((res) => {
        console.log("conpany的res", res)
        this.data = res.data
      })
    },
    getProData() {
      const url = "/companys/products?company=" + this.$route.query.cid
      this.axios.get(url).then((res) => {
        console.log("products的res", res)
        this.proList = res.data.data
      })
    },
  },
  mounted() {
    this.getData()
    this.getProData()
    this.getRanData()
  },
}
</script>

<style lang="scss" scoped>
.company_header {
  .breadcrumb {
    width: 1200px;
    margin: 10px auto;
    ::v-deep .el-breadcrumb__inner {
      color: #666;
    }
    ::v-deep .el-breadcrumb__inner.is-link {
      color: #999;
      font-weight: normal;
      &:hover {
        color: #e4464b;
      }
    }
  }
  .header_content {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    > img {
      width: 17%;
      // height: 100px;
    }
    .header_middle {
      flex: 1;
      display: flex;
      align-items: center;
      > img {
        border-radius: 20px 5px 5px 20px;
        height: 20px;
        margin: 0 10px 0 20px;
      }
    }
    .header_right {
      width: 25%;
      > div:nth-child(1) {
        display: flex;
        justify-content: space-between;
        .rates {
          color: #ee8546;
        }
        text-align: right;
      }
      > div:nth-child(2) {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        > span {
          margin-left: 10px;
          display: block;
          color: #e4464b;
          padding: 10px 20px;
          border: 1px solid #e4464b;
          border-radius: 100px;
          cursor: pointer;
          user-select: none;
        }
      }
    }
  }
  > div:last-child {
    height: 50px;
    background-color: #e4464b;
  }
}
.company_content {
  width: 1200px;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  .content_left {
    background-color: #fff;
    width: 48%;
    box-shadow: 0 0 20px 10px #f5f5f5;
    > img {
      width: 100%;
    }
    .img_bottom {
      display: flex;
      align-items: center;
      padding: 25px;
      > img {
        height: 30px;
        margin-right: 25px;
      }
      > div {
        display: flex;
        margin-right: 15px;
        > img {
          height: 20px;
        }
      }
    }
  }
  .content_right {
    width: 50%;
    background-color: #fafafa;
    h2 {
      box-sizing: border-box;
      display: block;
      width: 80px;
      // background-color: #ccc;
      flex-shrink: 0;
    }
    .phone {
      margin-left: 40px;
      margin-top: 30px;
      display: flex;
      align-items: center;
      border-bottom: 2px dotted #ddd;
      padding-bottom: 30px;
      margin-right: 40px;
      > div {
        margin-left: 0px;
        display: flex;
        color: #fff;
        background-color: #e4464b;
        align-items: center;
        padding: 7px 30px;
        font-size: 16px;
        border-radius: 100px;
        &:hover {
          opacity: 0.8;
        }
        > img {
          height: 16px;
        }
        > span {
          margin-left: 10px;
        }
      }
    }
    .address {
      display: flex;
      align-items: center;
      margin-left: 40px;
      margin-right: 40px;
      padding: 30px 0;
      border-bottom: 2px dotted #ddd;
      > span {
        margin-left: 0px;
        font-size: 16px;
        flex: 1;
        color: #333;
      }
      .map_section {
        ::v-deep button {
          > span {
            color: #e4464b;
          }
        }
        ::v-deep .el-dialog {
          display: flex;
          flex-direction: column;
          margin: 0 !important;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          max-height: calc(100% - 30px);
          max-width: calc(100% - 30px);
        }
        ::v-deep p {
          margin: 0 0 10px 10px;
        }
        ::v-deep .el-dialog .el-dialog__body {
          flex: 1;
          overflow: auto;
          padding: 0px 10px 10px;
        }
      }
    }
    .gift {
      display: flex;
      align-items: center;
      margin-left: 40px;
      margin-right: 40px;
      padding: 30px 0;
      border-bottom: 2px dotted #ddd;
      > span {
        margin-left: 0px;
        font-size: 16px;
        color: #333;
      }
    }
    .announcement {
      display: flex;
      align-items: center;
      margin-left: 40px;
      margin-right: 40px;
      padding: 30px 0;
      border-bottom: 2px dotted #ddd;
      > span {
        margin-left: 0px;
        font-size: 16px;
        color: #333;
      }
    }
  }
}
.products {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .product_left {
    width: 65%;
    .title {
      font-size: 30px;
    }
  }
  .product_right {
    width: 25%;
    h2 {
      margin-bottom: 20px;
    }
  }
}

::v-deep .el-button {
  height: 0;
  padding: 0;
  border: none;
}
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
::v-deep .el-dialog__body {
  padding: 0 20px 20px;
  h1 {
    text-align: center;
  }
  .input {
    height: 40px;
    width: 400px;
    display: block;
    margin: 10px auto 0;
    border: 1px solid #d9d9d9;
    outline-color: #5ea7f8;
  }
  > span {
    font-size: 8px;
    display: block;
    width: 400px;
    margin: 0 auto;
    color: #e4464b;
    visibility: hidden;
  }
  > div:nth-child(4) {
    height: 40px;
    width: 400px;
    margin: 0px auto 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .input {
      height: 100%;
      width: 270px;
      border: 1px solid #d9d9d9;
      outline-color: #5ea7f8;
      margin: 0;
    }
    > span {
      display: block;
      color: #fff;
      height: 100%;
      width: 120px;
      background-color: #e4464b;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      user-select: none;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
      &.disabled {
        background-color: #ccc;
        color: #fff;
        pointer-events: none;
      }
    }
  }
  .preOrder {
    display: block;
    height: 40px;
    width: 400px;
    margin: 30px auto;
    color: #fff;
    background-color: #e4464b;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
